<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML在线点名（不重复，记录）</title>
    <style>
        /* 样式 */
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
        }
        button {
            font-size: 1.2em;
            padding: 10px 20px;
            margin: 20px;
            border: none;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
        .result {
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            color: #f00;
        }
        .history {
            margin-top: 50px;
        }
        .history h2 {
            text-align: center;
        }
        .history ul {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .history li {
            display: inline-block;
            margin: 0 10px;
            font-size: 1.2em;
            font-weight: bold;
            color: #333;
        }
        form {
            margin-top: 50px;
            text-align: center;
        }
        input[type="text"] {
            font-size: 1.2em;
            padding: 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>HTML在线点名（不重复，记录）</h1>
    <div class="container">
        <button onclick="randomName()">点名</button>
        <p class="result"></p>
    </div>
    <div class="history">
        <h2>历史点名记录</h2>
        <ul class="list"></ul>
    </div>
    <form>
        <label>添加名字：</label>
        <input type="text" id="name" />
        <button type="button" onclick="addName( )">添加</button>
    </form>
    <script>
        // 名字数组
        let names = JSON.parse(localStorage.getItem("names")) || [];
        // 存储已经点过的名字
        let usedNames = JSON.parse(localStorage.getItem("usedNames")) || [];
        // 随机点名函数
        function randomName() {
            const result = document.querySelector(".result");
            if (usedNames.length === names.length) {
                result.innerHTML = "全部点过了！";
            } else {
                let index;
                do {
                    index = Math.floor(Math.random() * names.length);
                } while (usedNames.includes(index));
                usedNames.push(index);
                result.innerHTML = names[index];
                localStorage.setItem("usedNames", JSON.stringify(usedNames));
                renderList();
            }
        }
        // 渲染历史记录列表
        function renderList() {
            const list = document.querySelector(".list");
            list.innerHTML = "";
            usedNames.forEach((index) => {
                const li = document.createElement("li");
                li.innerHTML = names[index];
                list.append(li);
            });
        }
        // 页面加载时渲染历史记录列表
        window.onload = function() {
            renderList();
        };
        // 添加名字函数
        function addName() {
            const nameInput = document.querySelector("#name");
            const name = nameInput.value.trim();
            if (name) {
                names.push(name);
                localStorage.setItem("names", JSON.stringify(names));
                nameInput.value = "";
            }
        }
    </script>
</body>
</html>
</body>
</html>